其他
使用Bun和Next.js构建应用程序
Bun 是一个一体化的 JavaScript 运行时和工具包,设计速度极快。它配备了Bundler、Test Runner、原生 TypeScript 和 JSX 支持,甚至还有一个兼容 Node.js 的包管理器。
Next.js 是由 Vercel 创建的基于 React 的开源 Web 开发框架,以其独特的功能(如服务器端渲染和增强搜索引擎优化)而闻名。它还有一些附加功能,如数据获取工具、动态 API 路由、优化构建等。它是基于 React、Webpack 和 Babel 构建的框架。
1.安装 Bun
Bun 安装比较简单,但是windows系统暂不支持:
curl https://bun.sh/install | bash
2.项目初始化
通过 create-next-app
可以快速初始化一个 Next.js 项目。
$ bun create next-app
✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
Creating a new Next.js app in /Users/zuojunjun/Documents/workspaces/github-workspace/blog/fedlab/2023/09/0918/my-app.
Using bun.
Initializing project with template: app-tw
Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- tailwindcss
- postcss
- autoprefixer
- eslint
- eslint-config-next
使用 create-next-app 初始化 Next.js 应用程序。默认会使用 npm 自动安装依赖项。
3.本地运行项目
使用 Bun 运行时
$ cd my-app
$ bun --bun run dev
- ready started server on localhost:3000, url: http://localhost:3000
- event compiled client and server successfully in 314 ms (20 modules)
- wait compiling...
- event compiled client and server successfully in 67 ms (20 modules)
- wait compiling /page (client and server)...
- event compiled client and server successfully in 3.6s (417 modules)
- wait compiling...
- event compiled successfully in 367 ms (235 modules)
ConnectionClosed: The socket connection was closed unexpectedly. For more information, pass `verbose: true` in the second argument to fetch()
path: "http://localhost:61154/"
- wait compiling /_error (client and server)...
使用 Node.js 运行时
移除 --bun
参数,默认使用 Node.js 运行时
$ bun run dev
- ready started server on [::]:3000, url: http://localhost:3000
- event compiled client and server successfully in 303 ms (20 modules)
- wait compiling...
- event compiled client and server successfully in 172 ms (20 modules)
- wait compiling /page (client and server)...
- event compiled client and server successfully in 2.5s (417 modules)
- wait compiling...
- event compiled successfully in 328 ms (235 modules)
4.生产环境编译
Bun 运行时暂不支持生产环境 build,直接通过 bun run build 命令来实现。
bun run build
5.运行生产环境代码
bun run start